<!DOCTYPE html>
<html>
<head>

<title>Insert title here</title>

<script type="text/javascript">

	
  var leftVal = 220;
  function increase() {
	
	   var container = document.getElementById('container');
	   container.style.width = leftVal+'px';
	
	   if(container.style.width == '600px') {
	   return;
	}
	   leftVal = leftVal + 20;	
	
}
       var leftVal = 220;
       function decrease() {

	   var container = document.getElementById('container');
	   container.style.width = leftVal+'px';
	
	   if(container.style.width == '220px') {
	   return;
	}
	   leftVal = leftVal - 20;	
	
}
   
</script>
<style type="text/css">

  #container {
    background-color: yellow;
	border: 1px solid #008000;
	height: 178px;
	left: 571px;
	position: absolute;
	top: 129px;
	width: 220px;
	
	}

</style>
</head>
<body>
   <div id="container">
   </div>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/> 
   <br/>  
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
   <br/>
  <table align="center">
   
        <tr>
			<td align="center"><input type="button" value="Increase" onclick="increase();"/></td>
			<td align="center"><input type="button" value="Decrease" onclick="decrease();"/></td>
	    </tr>
      
   </table>
   
   
   
</body>
</html>